<template>
  <div style="margin-top: 20px">
    <el-row>
      <el-col :sm="{span:3,offset:21}">
        <el-button type="success" @click="goToAdd">添加</el-button>
      </el-col>
      <el-col :sm="{span:22,offset:1}" style="margin-top: 20px">
        <el-table v-loading="loading" :data="links" border stripe style="width: inherit">
          <el-table-column prop="id" label="id" width="50" align="center"></el-table-column>
          <el-table-column prop="imgLink" label="图片链接" width="250" align="center"></el-table-column>
          <el-table-column prop="name" label="名称" width="100" align="center"></el-table-column>
          <el-table-column prop="toLink" label="链接地址" width="250" align="center"></el-table-column>
          <el-table-column label="操作" align="center" >
            <template #default="scope">
              <el-button size="mini" type="primary" @click="Editor(scope.$index,scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="Delete(scope.$index,scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col style="text-align: center;margin-top: 20px">
        <el-pagination background :page-count="pages" v-model:current-page="currentPage" layout="prev,pager,next"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: "FriendLink",
  data(){
    return{
      loading:null,
      pages: 1,
      currentPage: 1,
      links: [],
      deleteInfo:{
        id: null,
        md5Password: null
      }
    }
  },
  watch: {
    currentPage(value){
      this.getLink(value);
    }
  },
  mounted(){
    this.getLink(1);
  },
  methods: {
    getLink(currentPage){
      axios.get("/admin/listFriendLink",{params:{currentPage:currentPage,pageSize:10}}).then( (res) => {
        this.links = res.data.records;
        this.currentPage = res.data.current;
        this.pages = res.data.pages;
      })
    },
    goToAdd(){
      this.$router.push({
        name: 'addLink'
      })
    },
    Editor(index,row){
      this.$router.push({
        name: 'addLink',
        query: {
          id: row.id
        }
      })
    },
    Delete(index,row){
      this.links.splice(index,1);
      this.deleteInfo.id = row.id;
      this.deleteInfo.md5Password = localStorage.getItem("password");
      axios.post("/admin/deleteFriendLink",this.deleteInfo).then((res) => {
        if ( res.data === true){
          this.$message.success("删除成功");
        }
        else {
          this.$message.error("删除失败");
        }
      })
    }
  }
}
</script>

<style scoped>

</style>